<template>
  <div class="social">
    <div class="business-course">
      <div class="title">
        开设课程
        <div class="bread">首页 > 业务入口 > 社会招生</div>
      </div>
      <div class="course-card-wrapper" :class="{'auto-height':autoHeight}">
        <div class="course-card" :class="{'active':item.active}" v-for="(item,index) in courseData" :key="index" @click="clickCourse(index)">
          <img :src="item.img" class="course-img" style="height:45px;width:140px"/>
          <div style="font-size: 14px;">{{item.text}}</div>
        </div>
      </div>
      <moreButton @seeMore='seeMore'></moreButton>
    </div>
    <coursePlan></coursePlan>
    <div class="other-info">
      <div class="info test-info">
        <div class="info-title">考试信息</div>
        <div class="info-item" v-for="i in 7" :key="i">
          华为认证数据通信工程师-HCNA考试
          <span class="date">2019-10-31</span>
        </div>
      </div>
      <div class="info work-info">
        就业信息
        <div class="work-item" v-for="i in 2" :key="i">
          <div class="title">
            <span>荀才中</span>
            <span class="d">本科</span>
            <span class="d">4年</span>
            <span class="pass">面试通过</span>
          </div>
          <div class="course">
            HCNA-storageIT-Presales-Specialis（华为售前IT认证）
            IP-Pre-salesSpecialist（华为售前数通认证）
          </div>
          <div class="date">2019-10-31</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import coursePlan from './course-plan'
import moreButton from './more-button'
import log01 from "../img/log01.png"
import log02 from "../img/log02.png"
import log03 from "../img/log03.png"
import log04 from "../img/log04.png"
import log05 from "../img/log05.png"
import log06 from "../img/log06.png"
import log07 from "../img/log07.png"
import log08 from "../img/log08.png"
import log09 from "../img/log09.png"
import log10 from "../img/log10.png"
import log11 from "../img/log11.png"
import log12 from "../img/log12.png"
import log13 from "../img/log13.png"
import log14 from "../img/log14.png"
import log15 from "../img/log15.png"

export default {
  data(){
    return {
      autoHeight:false,
      courseData:[
        {
          img:log01,
          text:'华为认证体系',
          active:true
        },
        {
          img:log02,
          text:'红帽认证体系',
          active:false
        },
        {
          img:log03,
          text:'思科认证体系',
          active:false
        },
        {
          img:log04,
          text:'甲骨文认证体系',
          active:false
        },
        {
          img:log05,
          text:'vmware认证体系',
          active:false
        },
        {
          img:log06,
          text:'python认证体系',
          active:false
        },
        {
          img:log07,
          text:'H3C认证体系',
          active:false
        },
        {
          img:log08,
          text:'锐捷认证体系',
          active:false
        },
        {
          img:log09,
          text:'微软认证体系',
          active:false
        },
        {
          img:log10,
          text:'戴尔认证体系',
          active:false
        },
        {
          img:log11,
          text:'CISP认证体系',
          active:false
        },
         {
          img:log12,
          text:'PMP认证体系',
          active:false
        },
        {
          img:log13,
          text:'Java认证体系',
          active:false
        },
        {
          img:log14,
          text:'CLOUD认证体系',
          active:false
        },
        {
          img:log15,
          text:'PEARSON认证体系',
          active:false
        },
      ]
    }
  },
  methods:{
    clickCourse(index){   //处理点击课程
      this.courseData = this.courseData.map((item,idx) => {
        if(idx == index){
          item.active = true        //点了谁，谁的激活状态就为true
        }else {
          item.active = false       //其余人都变为fasle
        }
        return item          //map函数必须return  返回最新状态的item
      })
    },
    seeMore(up){
      // 如果up为true，即为展开状态，此刻不需要控制包裹器的高度
      // 如果up为false，即为收起状态，需要改变包裹器的高度少一点
      this.autoHeight = up
    }
  },
  components:{
    coursePlan,moreButton
  }
};
</script>
<style lang="stylus">
.business-course {
  margin: -136px auto 0 auto;
  width: 1200px;
  min-height: 454px;
  padding: 40px;
  background-color: #ffffff;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    font-size: 28px;
    color: #1b1b1b;

    .bread {
      font-size: 12px;
      color: #666666;
    }
  }

  .course-card-wrapper {
    display flex;
    flex-wrap wrap;
    max-height 105px;
    overflow hidden
    transition all 500ms;
    &.auto-height{
      max-height 800px;
    }
    .course-card {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 185px;
      height: 105px;
      border-bottom: solid 1px #dcdcdc;
      border-right: solid 1px #dcdcdc;
      font-family: MicrosoftYaHeiLight;
      color: #666666;

      &:hover {
        cursor: pointer;
      }

      &:nth-of-type(6n-5) {
        border-left: solid 1px #dcdcdc;
      }

      &:nth-of-type(-n+6) {
        border-top: solid 1px #dcdcdc;
      }
      &.active{
        border-top 4px solid #da0800
      }
      .course-img {
        margin-bottom: 20px;
        // width: 136px;
        // height: 32px;
      }
    }
  }
}
.other-info {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  line-height: 40px;
  color: #1b1b1b;

  .info {
    width: 590px;
    min-height: 519px;
    padding: 40px;
    background: #fff;
  }

  .test-info {
    .info-title{
      font-size: 28px;
    }
    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 55px;
      border-bottom: solid 1px #dcdcdc;
      font-size: 14px;
      color: #1b1b1b;

      .date {
        color: #666666;
      }
    }
  }

  .work-info {
    

    .work-item {
      padding-top: 20px;
      min-height: 123px;
      font-size: 14px;
      color: #666666;
      border-bottom: solid 1px #dcdcdc;

      .date {
        line-height: 40px;
      }

      .course {
        line-height: 24px;
        color: #1b1b1b;
      }

      .title {
        display: flex;
        line-height: 24px;

        & > span {
          margin-right: 5px;
        }

        .d {
          background-color: #ededed;
          padding: 0 10px;
        }

        .pass {
          flex: 1;
          text-align: right;
          color: #ff3343;
        }
      }
    }
  }
}
</style>
